$figure-width: 600px;
$responsive-figure-width: $figure-width + 138px; // content + paddings around it

.developer-update {
  padding: 2.5rem;

  figure {
    margin: 0 auto;
    width: 100%;
    
    @media screen and (min-width: $responsive-figure-width) {
      width: min-content;
    }
  }
}

.developer-update__header {
  margin-bottom: 1.5rem;
}

.developer-update__heading {
  margin: 0;
}

.developer-update__subheading {
  opacity: 0.55;
}

.developer-update__body img,
.developer-update__body video {
  max-width: $figure-width;
  width: auto;
  
  @media screen and (max-width: $responsive-figure-width - 1px) {
    width: 100% !important; // override inline style
    max-width: 100%;
  }
}

.developer-update__body lite-youtube,
.developer-update__body iframe {
  margin: 0 auto;
  
  @media screen and (min-width: $responsive-figure-width) {
    max-width: 100%;
    width: $figure-width;
  }
}

.developer-update__footer {
  margin-top: 3rem;
  min-height: 350px; // set a min height so the comments links are a little more reasonable
}